<form class="form-main" name="addNode" role="form" data-ng-if="nodeCreateCtrl.step === 'one'">
    <div class="form-group" layout="column">
        <label>{/'Host IP' | translate/}<span class="required">*</span></label>
        <div class="form-control">
            <input id="node-add-ip" type="text" class="form-input" name="ip" data-ng-model="nodeCreateCtrl.ip"
                   data-ng-pattern="/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/" data-required="required">
        </div>
        <div ng-messages="addNode.ip.$error" ng-if="addNode.ip.$dirty" role="alert">
            <p class="text-danger help-text" ng-message="pattern">{/'Illegal IP address format' | translate/}</p>
            <p class="text-danger help-text" ng-message="required">{/'Volume Name is required' | translate/}</p>
        </div>
    </div>
    <footer class="form-buttons">
        <md-button id="node-add-next" class="md-raised md-primary" data-ng-click="nodeCreateCtrl.buildCmd(); nodeCreateCtrl.step = 'two'"
                   data-ng-disabled="addNode.$invalid">{/'Next' | translate/}
        </md-button>

        <md-button id="node-add-cancel" data-ng-click="rootCtrl.goBack()">{/'Cancel' | translate/}</md-button>
    </footer>
</form>

<form class="form-main" name="nodeCmd" role="form" data-ng-if="nodeCreateCtrl.step === 'two'">
    <div class="form-group" layout="column">
        <label>{/'Install Docker' | translate/}<span class="required">*</span>
            <small>{/'Docker intalled' | translate/}</small>
        </label>
        <div class="form-control">
            <code id="install-docker-code">{/nodeCreateCtrl.DOCKERSCRIT/}</code>
            <div class="sub-button">
                <md-button id="node-docker-ssh-copy" class="md-raised md-success md-small copy" ngclipboard
                           data-clipboard-target="#install-docker-code"><i class="fa fa-clone"></i> {/'Copy code' | translate/}
                </md-button>
            </div>
        </div>

    </div>
    <div class="form-group" layout="column">
        <label>{/'Add host commad' | translate/}<span class="required">*</span>
            <small>{/'Exec add host cmd' | translate/}</small>
        </label>
        <div class="form-control">
            <code id="cmd">{/nodeCreateCtrl.cmd/}</code>
            <div class="sub-button">
                <md-button id="node-master-ssh-copy" class="md-raised md-success md-small copy" ngclipboard data-clipboard-target="#cmd"><i
                        class="fa fa-clone"></i> {/'Copy code' | translate/}
                </md-button>
            </div>
        </div>
    </div>
    <footer class="form-buttons">
        <md-button id="node-add-last" data-ng-click="nodeCreateCtrl.step = 'one'">{/'Previous' | translate/}</md-button>
        <md-button id="node-add-ssh-cancel" data-ng-click="rootCtrl.goBack()">{/'Cancel' | translate/}</md-button>
        <md-button id="node-add-ssh-complete" class="md-raised md-primary" data-ng-click="$state.go('node.list')">{/'Done' | translate/}</md-button>
    </footer>
</form>